<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>旋转的金币</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .icon22 {
            width: 72px;
            height: 72px;
            line-height: 72px;
            text-align: center;
            color: #daa500;
            font-size: 40px;
            font-weight: 900;
            background-color: #ffee00;
            border-radius: 50%;
            box-shadow: inset 0 0 0 4px #ffee00, inset 0 0 0 5px #daa500, 0 5px 12px rgba(0, 0, 0, 0.2);
            animation: ani-icon22 5s ease infinite;
        }

        @keyframes ani-icon22 {
            0% {
                transform: rotateY(0deg);
                animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
            }

            50% {
                transform: rotateY(900deg);
                animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
            }

            100% {
                transform: rotateY(1800deg);
                animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="icon22">¥</div>
    </div>
</body>

</html>